const path = require("path");
const webpack = require("webpack");
const htmlWebpackPlugin = require("html-webpack-plugin");
const uglifyJsPlugin = require("uglifyjs-webpack-plugin");

module.exports = {
  // 入口：可以是字符串/数组/对象,
  entry: "./main.js",
  // 出口：通常是一个对象，里面至少包含两个重要的属性，path和filename
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js",
    // publicPath: "dist/",
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.less$/,
        loader: [
          // compiles Less to CSS
          "style-loader",
          "css-loader",
          "less-loader",
        ],
      },

      {
        test: /\.(png|jpg|gif|jpeg)$/,
        use: [
          {
            loader: "url-loader",
            options: {
              limit: 11000,
              name: "img/[name].[hash:8].[ext]",
            },
          },
        ],
      },
      // {
      //   test: /\.m?js$/,
      //   exclude: /(node_modules|bower_components)/,
      //   use: {
      //     loader: "babe;-loader",
      //     options: {
      //       persets: ["es2015"],
      //     },
      //   },
      // },
      {
        test: /\.vue$/,
        use: ["vue-loader"],
      },
    ],
  },
  resolve: {
    // alias:别名
    alias: {
      // 这个VUE就有runtime-compiler
      vue$: "vue/dist/vue.esm.js",
    },
  },
  // 添加版权的Plugin插件(内置插件，不需要npm安装)
  plugins: [
    new webpack.BannerPlugin("最终解释权归李所有"),
    new htmlWebpackPlugin({
      template: "index.html",
    }),
    new uglifyJsPlugin(),
  ],
  // webpack提供了一个可选的本地开发服务器，这个本地服务器基于node.js搭建，内部使用express框架，可以实现我们想要的让浏览器自动刷新显示我们修改后的结果。
  //  devserver也是作为webpack中的一个选项，选项本身可以设置如下属性：
  // contentBase：为哪一个文件夹提供本地服务，默认是根文件夹，我们这里要填写./dist
  // port：端口号
  // inline：页面实时刷新
  // historyApiFallback：在SPA页面中，依赖HTML5的history模式
  devServer: {
    contentBase: "./dist",
    inline: true,
  },
};
